<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=candlestick-sh
-->
<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />

    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />

    <style>
      .clock_box {
      }
      .main {
        background-color: #333333;
        height: 800px;
      }
      .flex-c {
        display: flex;
      }
      .box {
        height: 200px;
        width: 200px;
        position: relative;
      }
      .box > .item2,
      .box > .item3,
      .box > .item4 {
        position: absolute;
        z-index: 1;
        bottom: 0px;
        right: 0px;
        border-radius: 200px 0px 0px 0px;
      }
      .item1 {
        background: #cce5ff;
        height: 100%;
        width: 100%;
        border-radius: 50px 0px 0px 0px;
        border-bottom: 2.5px solid white;
        border-right: 2.5px solid white;
        box-sizing: border-box;
      }
      .item2 {
        background: #82a1d9;
        height: 80%;
        width: 80%;
        border-top: 5px solid white;
        border-left: 5px solid white;
        border-right: 2.5px solid white;
        border-bottom: 2.5px solid white;
      }
      .item3 {
        background: #d9e0f2;
        height: 50%;
        width: 50%;
        border-top: 5px solid white;
        border-left: 5px solid white;
        border-right: 2.5px solid white;
        border-bottom: 2.5px solid white;
      }
      .item4 {
        background: #ffffff;
        height: 20%;
        width: 20%;
        border-top: 5px solid #a9c4eb;
        border-left: 5px solid #a9c4eb;
        border-bottom: 2.5px solid #a9c4eb;
        border-right: 2.5px solid #a9c4eb;
      }

      .box1 > .item1 {
        border-radius: 0px 50px 0px 0px;
        border-left: 2.5px solid white;
        border-right: 0px solid white;
      }
      .box1 > .item2 {
        left: 0px;
        border-radius: 0px 200px 0px 0px;
        border-right: 5px solid white;
        border-left: 2.5px solid white;
      }
      .box1 > .item3 {
        left: 0px;
        border-radius: 0px 200px 0px 0px;
        border-right: 5px solid white;
        border-left: 2.5px solid white;
      }
      .box1 > .item4 {
        left: 0px;
        border-radius: 0px 200px 0px 0px;
        border-left: 2.5px solid #a9c4eb;
        border-right: 5px solid #a9c4eb;
      }
      .flex2 .item1 {
        border-radius: 0px 0px 0px 50px;
        border-top: 2.5px solid white;
        border-right: 2.5px solid white;
        border-bottom: 0px solid white;
      }
      .flex2 .item2 {
        border-radius: 0px 0px 0px 200px;
        top: 0px;
        border-bottom: 5px solid white;
        border-top: 2.5px solid white;
      }
      .flex2 .item3 {
        border-radius: 0px 0px 0px 200px;
        top: 0px;
        border-right: 2.5px solid white;
        border-left: 5px solid white;
        border-bottom: 5px solid white;
        border-top: 2.5px solid white;
      }
      .flex2 .item4 {
        border-radius: 0px 0px 0px 200px;
        top: 0px;
        border-left: 5px solid #a9c4eb;
        border-right: 2.5px solid #a9c4eb;
        border-bottom: 5px solid #a9c4eb;
        border-top: 2.5px solid #a9c4eb;
      }
      .flex2 .box1 > .item1 {
        border-radius: 0px 0px 50px 0px;
        border-left: 2.5px solid white;
        border-right: 0px solid white;
        border-bottom: 0px solid white;
      }
      .flex2 .box1 > .item2 {
        border-radius: 0px 0px 200px 0px;
        border-bottom: 5px solid white;
        top: 0px;
      }
      .flex2 .box1 > .item3 {
        border-radius: 0px 0px 200px 0px;
        border-right: 5px solid white;
        border-left: 2.5px solid white;
        border-bottom: 5px solid white;
        top: 0px;
      }
      .flex2 .box1 > .item4 {
        border-radius: 0px 0px 200px 0px;
        border-left: 2.5px solid #a9c4eb;
        border-right: 5px solid #a9c4eb;
        border-bottom: 5px solid #a9c4eb;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <section class="clock_box">
      <div class="main">
        <div class="flex-c">
          <div class="box">
            <div class="item1">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item2">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item3">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item4">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
          </div>
          <div class="box1 box">
            <div class="item1">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item2">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item3">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item4">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
          </div>
        </div>
        <div class="flex-c flex2">
          <div class="box">
            <div class="item1">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item2">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item3">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item4">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
          </div>
          <div class="box1 box">
            <div class="item1">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item2">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item3">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
            <div class="item4">
              <div class="bg"></div>
              <div class="content"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>
